<template>
  <div class="platform-develop">
    <je-panel v-bind="options">
      <template #left>
        <div class="left"
          ><SettingNav
            :nav-list="navList"
            :active-name="activeName"
            @change-nav-item="changeNavItem"
        /></div>
      </template>
      <template #default><component :is="activeName" :data-all="DataChange"></component> </template>
      <template #tbar>
        <Toolbar space="10">
          <Button type="primary" class="save toolbarEvent" @click="toolbarEvent"
            ><i class="fal fa-save">{{ $t('save') }}</i></Button
          >
          <!-- <Button class="save"
            ><i class="fal fa-arrow-from-bottom"
              ><span class="btnImport">{{ $t('export') }}</span></i
            ></Button
          >
          <Button class="save"
            ><i class="fal fa-arrow-from-top"
              ><span class="btnImport">{{ $t('import') }}</span></i
            ></Button
          > -->
          <TbFill />
          <Search
            v-model:value="value"
            label-field="value"
            sub-label-field="text"
            :placeholder="$t('search')"
            style="width: 240px"
            @search="onSearch"
            @select="onSelect"
          />
        </Toolbar>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import SettingNav from '@/components/setting-nav.vue';
  import RuntimeConfig from '@/views/platform-develop/runtime-config/index.vue';
  import SecurityConfig from '@/views/platform-develop/security-config/index.vue';
  import MessageService from '@/views/platform-develop/message-service/index.vue';
  import LoginConfig from '@/views/platform-develop/login-config/index.vue';
  import DevelopOnline from '@/views/platform-develop/develop-online/index.vue';
  import DocumentOnline from '@/views/platform-develop/document-online/index.vue';
  import DocumentSetting from '@/views/platform-develop/document-setting/index.vue';
  import FileManage from '@/views/platform-develop/file-manage/index.vue';
  import TeamConfig from '@/views/platform-develop/team-config/index.vue';
  import { Panel, Button, Toolbar, Search, Input } from '@jecloud/ui';
  import { reactive, ref, onUnmounted, onMounted } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { pinyin } from '@jecloud/utils';
  import { getAllData } from '@/api';
  import { changeObj, mergeArray } from '@/utils/utils';
  import configData from '@/data/platform-develop-data';
  import SearchData from '@/data/search-data-setting';
  import { useI18n } from '@common/locales';

  export default {
    name: 'PlatformDevelop',
    components: {
      SettingNav,
      JePanel: Panel,
      Button,
      Toolbar,
      Search,
      TbFill: Toolbar.Fill,
      RuntimeConfig,
      SecurityConfig,
      MessageService,
      LoginConfig,
      DevelopOnline,
      DocumentOnline,
      FileManage,
      InputGroup: Input.Group,
      TeamConfig,
      DocumentSetting,
    },
    setup() {
      const I18n = useI18n().messages.zh_CN;
      const options = reactive({
        left: {
          style: {
            width: '240px',
          },
        },
        // tabr样式
        tbar: {
          style: {
            backgroundColor: '#e2e2e2',
            height: '50px',
            padding: '0px 17px',
          },
        },
      });

      // 导航栏的配置
      const navList = reactive([
        {
          icon: 'jeicon jeicon-platform-run',
          title: I18n.platformDevelop.running,
          color: '#edcf62',
          option: 'RuntimeConfig',
        },
        {
          icon: 'jeicon jeicon-platform-safety',
          title: I18n.platformDevelop.safe,
          color: '#00a642',
          option: 'SecurityConfig',
        },
        {
          icon: 'jeicon jeicon-platform-message',
          title: I18n.platformDevelop.message,
          color: '#00BCBC',
          option: 'MessageService',
        },
        {
          icon: 'jeicon jeicon-platform-login',
          title: I18n.platformDevelop.login,
          color: '#EDCF62',
          option: 'LoginConfig',
        },
        {
          icon: 'jeicon jeicon-platform-team',
          title: I18n.platformManage.team,
          color: '#F59B22',
          option: 'TeamConfig',
        },
        {
          icon: 'jeicon jeicon-platform-develop',
          title: I18n.platformDevelop.develop,
          color: '#3265F4',
          option: 'DevelopOnline',
        },
        {
          icon: 'jeicon jeicon-platform-document',
          title: I18n.platformDevelop.documentSetting,
          color: '#F59B22',
          option: 'DocumentSetting',
        },
        // {
        //   icon: 'jeicon jeicon-platform-document',
        //   title: I18n.platformDevelop.document,
        //   color: '#F59B22',
        //   option: 'DocumentOnline',
        // },
        /* {
          icon: 'jeicon jeicon-platform-storage',
          title: I18n.platformDevelop.store,
          color: '#F3752D',
          option: 'FileManage',
        }, */
      ]);
      // 当前选中
      const activeName = ref('RuntimeConfig');
      const changeNavItem = (parames) => {
        if (activeName.value === parames) return false;
        activeName.value = parames;
      };

      const toolbarEvent = () => {
        // 保存事件分发
        VueEvent.emit('toolbarSaveEvent');
      };

      let DataChange = reactive(configData);
      // 得到数据
      onMounted(() => {
        getAllData({ attribute: 'platform-develop' }).then((data) => {
          DataChange = JSON.parse(JSON.stringify(data.childSettings));
          const res = changeObj(DataChange);
          const result = mergeArray(configData, res);
          DataChange = result;
          VueEvent.emit('sendData', DataChange);
        });
      });

      // 订阅保存数据后的回调
      const changeAllData = (res) => {
        const { item, formState } = { ...res };
        const result = DataChange.filter((td) => {
          return td.code === item;
        });
        result[0]?.items.find((td) => {
          Object.keys(formState).find((i) => {
            if (td.code === i) {
              td.value = formState[i] || '';
            }
          });
        });
      };

      // 搜索功能
      const value = ref('');
      const onSelect = (val, option) => {
        value.value = val;
        // 搜索的事件分发，传相应的item
        VueEvent.emit('trigger', option);
      };
      // 节点过滤函数
      const filter = (item, keyword) => {
        const _word = item.word?.toLocaleLowerCase() ?? '';
        const pinyinText = pinyin(_word, 'pinyin');
        if (_word.includes(keyword) || pinyinText.includes(keyword)) {
          return true;
        }
        return false;
      };
      // 查询关键字
      const onSearch = (keyword, resolve) => {
        let items = [];
        keyword = keyword.toLocaleLowerCase();
        SearchData.forEach((item) => {
          if (filter(item, keyword)) {
            items.push({
              value: item.word,
              text: item.text,
              key: item.code,
              name: item.name,
              parentName: item.parentName,
            });
          }
        });
        resolve(items);
      };

      VueEvent.on('changeAllData', changeAllData);
      onUnmounted(() => {
        VueEvent.off('changeAllData', changeAllData);
      });

      return {
        navList,
        options,
        changeNavItem,
        activeName,
        toolbarEvent,
        DataChange,
        value,
        onSearch,
        onSelect,
      };
    },
  };
</script>
<style lang="less" scoped>
  .platform-develop {
    background: #f0f2f5 !important;
    width: 100%;
    height: 100%;
    overflow-x: auto !important;
    color: #333333;
    :deep(.fa-flower) {
      margin-top: 2px;
      color: rgb(235, 235, 235);
    }
    .je-panel {
      width: 1250px;
      margin: 20px auto;
    }
    .left {
      width: 230px;
    }
    .fal {
      font-weight: 500;
    }

    .save {
      display: flex;
      align-items: center;
      width: 80px;
      height: 32px;
      text-align: center;
      &:hover {
        cursor: pointer;
      }
    }
    :deep(hr) {
      width: 1010px;
      opacity: 0.1;
    }
    :deep(.myInput) {
      width: 700px;
    }
    :deep(.myInputNumber) {
      width: 665px;
    }
    :deep(.text) {
      margin-top: 6px;
      font-size: 13px;
      color: #a9aba9;
    }
    :deep(.ant-form-item) {
      padding-top: 4px;
    }
    :deep(.je-panel-item-region-default) {
      width: 100%;
      height: 100%;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    :deep(.back-btn) {
      padding-left: 20px;
    }

    // :deep(.my-checkbox) {
    //   margin-top: 5px;
    // }
    :deep(.fade-animation) {
      animation: fade 1.5s;
    }
    @keyframes fade {
      0% {
        background: rgba(228, 241, 255, 0.1);
      }
      50% {
        background: rgba(228, 241, 255, 1);
      }
      100% {
        background: rgba(228, 241, 255, 0.1);
      }
    }
  }
</style>
